<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>后台布局</title>
	<style type="text/css">
	    html,body {
	    	margin: 0;
	    	padding: 0;
	    	font:14px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
	    }
		.layout-body {
			overflow: hidden;
		}
		.layout-admin, .page-header {
			background-color:#23262E;
		}
		.page-header {
			z-index: 1000;
            height: 60px;
            position: relative;
		}
		.page-side {
			position: fixed;
			bottom: 0;
			z-index: 999;
			color: #fff !important;
			background-color: #393D49 !important;
			top: 60px;
            width: 200px;
            overflow-x: hidden;
		}
		.page-body {
			position: absolute;
			left: 200px;
			right: 0;
			z-index: 998;
			width: auto;
			overflow-x: hidden;
			overflow-y: auto;
			box-sizing: border-box;
			top: 60px;
			bottom: 44px;
		}
		.page-footer {
			position: fixed;
            left: 200px;
            right: 0;
            bottom: 0;
            height: 44px;
            line-height: 44px;
            padding: 0 15px;
            background-color: #eee;
		}
	</style>
</head>
<body class="layout-body">
	<div class="layout-admin">
		<div class="page-header"></div>
		<div class="page-side"></div>
		<div class="page-body"></div>
		<div class="page-footer">
			© layui.com - 底部固定区域 
		</div>
	</div>
</body>
</html>